<template>
    <div>
        <!--面包屑导航区域-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home_com' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>公司信息</el-breadcrumb-item>
        </el-breadcrumb>
        <!--卡片视图区域-->
        <el-card>
            <!--公司信息区域-->
            <el-descriptions class="margin-top" title="公司信息" :column="3" :size="size" border>
                <template #extra>
                    <el-button type="primary" @click="showEditDialog">修改公司信息</el-button>
                </template>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <House />
                            </el-icon>
                            公司名称
                        </div>
                    </template>
                    {{this.info.name}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <user />
                            </el-icon>
                            法人代表
                        </div>
                    </template>
                    {{this.info.legal}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <Star />
                            </el-icon>
                            公司类别
                        </div>
                    </template>
                    {{this.info.com_type}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <OfficeBuilding />
                            </el-icon>
                            地址
                        </div>
                    </template>
                    {{this.info.addr}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <Calendar />
                            </el-icon>
                            成立时间
                        </div>
                    </template>
                    {{this.info.Found_Date}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon :style="iconStyle">
                                <Memo />
                            </el-icon>
                            公司简介
                        </div>
                    </template>
                    {{this.info.intro}}
                </el-descriptions-item>
            </el-descriptions>
            <el-divider></el-divider>
            <h4>HR信息</h4>
            <!--HR信息区域-->
            <el-table :data="HRlist" :border="true" :stripe="true">
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="id" label="HR编号"></el-table-column>
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="phone" label="联系电话"></el-table-column>              
            </el-table>
        </el-card>
        <!--修改信息对话框-->
        <el-dialog title="修改公司信息" v-model="editInfoVisible" width="50%" @close="editDialogClosed">
            <!--内容主体区域-->
            <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="80px">
                <el-form-item label="公司编号" prop="editid">
                    <el-input v-model="info.id" disabled></el-input>
                </el-form-item>
                <el-form-item label="公司名称" prop="editname">
                    <el-input v-model="editForm.editname"></el-input>
                </el-form-item>
                <el-form-item label="法人代表" prop="editlegal">
                    <el-input v-model="editForm.editlegal"></el-input>
                </el-form-item>
                <el-form-item label="公司类别" prop="editcom_type">
                    <el-input v-model="editForm.editcom_type"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="editaddr">
                    <el-input v-model="editForm.editaddr"></el-input>
                </el-form-item>
                <el-form-item label="成立时间" prop="editFound_Date">
                    <el-input v-model="editForm.editFound_Date"></el-input>
                </el-form-item>
                <el-form-item label="公司简介" prop="editintro">
                    <el-input v-model="editForm.editintro"></el-input>
                </el-form-item>
            </el-form>
            <!--底部区域-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="editInfoVisible = false">取 消</el-button>
                <el-button type="primary" @click="edit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            info: {
                id: '111222222',
                name: '华为',
                legal: '法人代表',
                com_type: '互联网',
                addr: '江苏南京',
                Found_Date: '2020',
                intro: '111111'
            },
            //控制修改岗位对话框的显示与隐藏
            editInfoVisible: false,
            editForm: {
                editid: '',
                editname: '',
                editlegal: '',
                editcom_type: '',
                editaddr: '',
                editFound_Date: '',
                editintro: ''
            },
            //修改表单的验证规则
            editFormRules: {
            },
            HRlist: [
                {
                    id: '111',
                    name: '111',
                    phone: '111'
                },
                {
                    id: '111',
                    name: '222',
                    phone: '111'
                }
            ]
        }
    },
    // created() {
    //     this.getComInfo();
    //     this.getHRInfo();
    // },
    methods: {
        //     async getComInfo() {
        //       const { data: res } = await this.$http.get('请求路径', { params: window.sessionStorage.getItem('token')})
        //         if(res.meta.status !== 200){
        //             return this.$message.error('获取信息失败！')
        //         }
        //         this.info = res.data.对应字段名
        //     },
        //     async getHRInfo() {
        //       const { data: res } = await this.$http.get('请求路径', { params: window.sessionStorage.getItem('token')})
        //         if(res.meta.status !== 200){
        //             return this.$message.error('获取信息失败！')
        //         }
        //         this.HRlist = res.data.对应字段名
        //     },
        //监听修改对话框的关闭事件
        editDialogClosed() {
            this.$refs.editFormRef.resetFields()
        },
        //点击修改
        edit() {
            // this.$refs.editFormRef.validate(async valid => {
            //     if(!valid) return
            //     const { data: res } = await this.$http.put('请求路径/'+{ params: this.editForm })
            //     if(res.meta.status !== 200){
            //         return this.$message.error('修改信息失败')
            //     }
            this.$message.success('修改成功')
            //隐藏修改岗位对话框
            this.editInfoVisible = false
            //重新获取信息数据
            //this.getComInfo()
            //})
        },
        //展示编辑对话框
        async showEditDialog() {
            // const { data: res } = await this.$http.get('请求路径/' + id)
            // if(res.meta.status !== 200){
            //     return this.$message.error('查询个人信息失败！')
            // }
            // this.editForm = res.data
            this.editInfoVisible = true
        }
    }
}
</script>

<style lang="less" scoped>

</style>